<template>
  <div id="statisticsChart4"></div>
</template>

<script>
import { Chart } from '@antv/g2';
import { onMounted } from "vue";
import plotData from "@/assets/statistics/distribution.json";

// 定义染色体的顺序
const chromosomeOrder = [
  'chr1', 'chr2', 'chr3', 'chr4', 'chr5', 'chr6', 'chr7', 'chr8', 'chr9', 'chr10',
  'chr11', 'chr12', 'chr13', 'chr14', 'chr15', 'chr16', 'chr17', 'chr18', 'chr19', 'chr20',
  'chr21', 'chr22', 'chrX', 'chrY'
];

// 定义一个函数来对数据按染色体顺序排序
function sortDataByChromosome(data) {
  return data.sort((a, b) => {
    const indexA = chromosomeOrder.indexOf(a.x);
    const indexB = chromosomeOrder.indexOf(b.x);
    return indexA - indexB;
  });
}

export default {
  name: "statistics_chart4",
  setup() {
    onMounted(() => {
      // 对数据进行排序
      const sortedPlotData = sortDataByChromosome(plotData);

      const chart = new Chart({
        container: 'statisticsChart4',
        autoFit: true,
      });

      chart.options({
        type: "view",
        autoFit: true,
        data: sortedPlotData,
        children: [
          {
            type: "density",
            data: {
              type: 'inline',
              value: sortedPlotData,
              transform: [{ type: "kde", field: "y", groupBy: ["x"], as: ['y', 'size'] }],
            },
            encode: {
              x: "x",
              y: "y",
              series: "x",
              color: "x",
              size: "size",
            },
            tooltip: false,
          },
          {
            type: "boxplot",
            data: sortedPlotData,
            encode: {
              x: "x",
              y: "y",
              series: "x",
              color: "x",
              shape: "violin",
            },
            style: { opacity: 0.5, strokeOpacity: 0.5, point: false },
          },
        ],
        axes: [
          {
            type: "x",
            lineStyle: {
              type: 'solid', // 设置为实线
              color: '#333', // 可选：设置线条颜色
              width: 1      // 可选：设置线条宽度
            },
            splitLine: {
              lineStyle: {
                type: 'dashed', // 分割线样式（可选）
                color: '#999', // 分割线颜色（可选）
                width: 1       // 分割线宽度（可选）
              }
            }
          }
        ]
      });

      chart.render();
    });
  }
};
</script>

<style scoped>

</style>
